<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>
      <el-steps :active="active" simple>
        <el-step title="填写借款人信息" icon="el-icon-edit"></el-step>
        <el-step title="提交平台审核" icon="el-icon-upload"></el-step>
        <el-step title="认证结果" icon="el-icon-picture"></el-step>
      </el-steps>
      <div v-if="active === 0" class="user-borrower">
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age"/>
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'"/>
              <el-option :value="0" :label="'女'"/>
            </el-select>
          </el-form-item>
          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option
                  v-for="item in educationList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option
                  v-for="item in industryList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option
                  v-for="item in incomeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option
                  v-for="item in returnSourceList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName"/>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile"/>
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option
                  v-for="item in contactsRelationList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload
                :on-success="onUploadSuccessIdCard1"
                :on-remove="onUploadRemoveIdCard1"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'idCard1' }"
                :limit="1"
                list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <el-upload
                :on-success="onUploadSuccessIdCard2"
                :on-remove="onUploadRemoveIdCard2"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'idCard2' }"
                :limit="1"
                list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <el-upload
                :on-success="onUploadSuccessHouse"
                :on-remove="onUploadRemoveHouse"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'house' }"
                list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="车辆信息">
            <el-upload
                :on-success="onUploadSuccessCar"
                :on-remove="onUploadRemoveCar"
                :multiple="false"
                :action="uploadUrl"
                :data="{ module: 'car' }"
                list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form label-width="120px">
          <el-form-item>
            <el-button
                type="primary"
                :disabled="submitBtnDisabled"
                @click="save">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert
              title="您的认证申请已成功提交，请耐心等待"
              type="warning"
              show-icon
              :closable="false">
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>
      <div v-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert
              v-if="borrowerStatus === 2"
              title="您的认证审批已通过"
              type="success"
              show-icon
              :closable="false">
          </el-alert>
          <el-button
              style="margin:10px;"
              size="small"
              type="success"
              v-if="borrowerStatus === 2"
              @click="handleBorrow"
          >
            我要借款
          </el-button>
          <el-alert
              v-if="borrowerStatus === -1"
              title="您的认证审批未通过"
              type="error"
              show-icon
              :closable="false">
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // module: 'idCard1'   http://192.168.56.129/api/oss/upload?module=idCard1
      uploadUrl: "http://192.168.56.129/api/oss/upload",
      submitBtnDisabled: false,
      returnSourceList: [], //还款来源集合
      incomeList: [], //收入来源集合
      industryList: [], //行业集合
      educationList: [], //学历集合
      contactsRelationList: [], //联系人关系
      borrower: {},
      active: 0,
      borrowerStatus: 0,
    };
  },
  /*created() {
  },*/
  mounted() {
    this.getStatus();
  },
  methods: {
    //跳转到借款申请页面
    handleBorrow() {
      this.$router.push("/user/apply");
    },
    //初始化加载会员借款人审核状态
    getStatus() {
      let token = localStorage.getItem("SRB-TOKEN");
      if (!token) {
        this.$message.warning("请先登录");
        return;
      }
      this.$axios({
        url: "/api/core/borrower/status",
        method: "GET",
        headers: {token},
      }).then((r) => {
        this.borrowerStatus = r.data.data.status;
        if (this.borrowerStatus === 0) {
          this.active = 0;
          this.initData(); //只有会员没有提交借款人信息时 才需要初始化回显表单数据
        } else if (this.borrowerStatus === 1) {
          this.active = 1;
        } else if (this.borrowerStatus === 2 || this.borrowerStatus === -1) {
          this.active = 2;
        }
      });
    },
    //车辆信息上传成功回调
    onUploadSuccessCar(response, file, fileList) {
      this.borrower.car = response.data.path;
      this.$message.success("车辆信息上传成功");
    },
    //删除车辆信息文件
    onUploadRemoveCar() {
      if (this.borrower.car) {
        this.$axios({
          url: "/api/oss/delete",
          method: "DELETE",
          params: {path: this.borrower.car},
        }).then((r) => {
          this.borrower.car = null;
          this.$message.success("删除车辆信息照成功");
        });
      }
    },
    //上传房产信息图片
    onUploadSuccessHouse(response, file, fileList) {
      this.borrower.house = response.data.path;
      this.$message.success("房产信息上传成功");
    },
    //删除房产图片
    onUploadRemoveHouse() {
      if (this.borrower.house) {
        this.$axios({
          url: "/api/oss/delete",
          method: "DELETE",
          params: {path: this.borrower.house},
        }).then((r) => {
          this.borrower.house = null;
          this.$message.success("删除房产信息照成功");
        });
      }
    },
    //上传身份证正面照成功的回调事件
    onUploadSuccessIdCard1(response, file, fileList) {
      this.borrower.idCard1 = response.data.path;
      this.$message.success("身份证正面照上传成功");
    },
    //上传身份证反面照成功的回调事件
    onUploadSuccessIdCard2(response, file, fileList) {
      this.borrower.idCard2 = response.data.path;
      this.$message.success("身份证反面照上传成功");
    },
    //移除上传的身份证正面照
    onUploadRemoveIdCard1(file, fileList) {
      if (this.borrower.idCard1) {
        this.$axios({
          url: "/api/oss/delete",
          method: "DELETE",
          params: {path: this.borrower.idCard1},
        }).then((r) => {
          this.borrower.idCard1 = null;
          this.$message.success("删除身份证正面照成功");
        });
      }
    },
    //移除上传的身份证反面照
    onUploadRemoveIdCard2(file, fileList) {
      if (this.borrower.idCard2) {
        this.$axios({
          url: "/api/oss/delete",
          method: "DELETE",
          params: {path: this.borrower.idCard2},
        }).then((r) => {
          this.borrower.idCard2 = null;
          this.$message.success("删除身份证反面照成功");
        });
      }
    },
    //加载数据字典列表
    initData() {
      this.$axios.$get("/api/core/dict/list/industry").then((r) => {
        this.industryList = r.data.items;
      });
      this.$axios.$get("/api/core/dict/list/returnSource").then((r) => {
        this.returnSourceList = r.data.items;
      });
      this.$axios.$get("/api/core/dict/list/income").then((r) => {
        this.incomeList = r.data.items;
      });
      this.$axios.$get("/api/core/dict/list/education").then((r) => {
        this.educationList = r.data.items;
      });
      this.$axios.$get("/api/core/dict/list/relation").then((r) => {
        this.contactsRelationList = r.data.items;
      });
    },
    //提交借款人认证信息
    save() {
      this.submitBtnDisabled = true; //禁用提交按钮
      let token = localStorage.getItem("SRB-TOKEN");
      if (!token) {
        this.$message.warning("请先登录");
        return;
      }
      this.$axios({
        url: "/api/core/borrower",
        method: "POST",
        headers: {token},
        data: this.borrower,
      }).then((r) => {
        this.$message.success(r.data.message);
        this.active = 1;
      });
    },
  }
}
</script>
